<template>
  <div>
    <a-row>
      <a-col v-for="(d, i) in statisticData" :key="i" span="8">
        <div
          style="
            background-color: rgb(247, 247, 247);
            padding: 20px;
            margin-right: 6px;
          "
        >
          <a-icon
            type="codepen-circle"
            style="font-size: 50px; color: rgb(251, 184, 27)"
          />
          <div style="display: inline-block; margin-left: 20px">
            <div>{{ d.name }}</div>
            <div>
              <b style="color: rgb(251, 186, 33)">{{ d.value }}</b>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <div style="padding: 24px 0">
      <a-form-model
        ref="formModel"
        class="search-form"
        layout="inline"
        :model="form"
        :rules="formRules"
      >
      <div class="search-box-end">
        <a-form-model-item class="search-item" prop="deviceType" label="预警类型">
          <a-select
            :getPopupContainer="
            triggerNode => {
              return triggerNode.parentNode || document.body;
            }"
            style="width: 150px"
            v-model="form.deviceType"
            @change="handleDeviceTypeChange"
          >
            <a-select-option
              v-for="d in deviceTypeList"
              :key="d.value"
              :value="d.value"
            >
              {{ d.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item class="search-item" prop="meter" label="监控项">
          <a-select
            :getPopupContainer="
            triggerNode => {
              return triggerNode.parentNode || document.body;
            }"
            style="width: 150px"
            v-model="form.meter">
            <a-select-option
              v-for="d in meterList"
              :key="d.meter"
              :value="d.meter"
            >
              {{ d.cnName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item class="search-item" prop="timeRange" label="预警时间">
          <a-range-picker
            v-model="form.timeRange"
            show-time
            inputReadOnly
            :placeholder="['开始时间', '结束时间']"
            :disabled-date="disabledDate"
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-model-item>

        <div style="line-height: 40px" class="search-item">
          <a-button
            type="primary"
            @click="handleSearch"
            icon="search"
            style="margin-left: 12px"
            >查询</a-button
          >
          <a-button
            @click="resetSearchForm"
            icon="reload"
            style="margin-left: 12px"
            >重置</a-button
          >
        </div>
      </div>
      </a-form-model>
      <a-table
        ref="table"
        rowKey="id"
        size="middle"
        :columns="columns"
        :dataSource="gDataSource"
        :pagination="gPagination"
        @change="gHandleTableChange"
      >
        <span slot="sortCol" slot-scope="text, record, index">
          {{
            (gPagination.current - 1) * gPagination.pageSize +
            parseInt(index) +
            1
          }}
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";

export default {
  name: "Warning",
  mixins: [GwListMixin],
  components: {},
  data() {
    return {
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "设备/数据中心",
          dataIndex: "resourceName",
          width: 160,
          customRender: function (t, r, index) {
            return r.resourceName || r.resourceId;
          },
        },
        {
          title: "监控项",
          width: 120,
          dataIndex: "meterName",
        },
        {
          title: "预警类型",
          width: 120,
          dataIndex: "deviceTypeCnName",
        },
        {
          title: "等级",
          width: 60,
          dataIndex: "levelCnName",
        },
        {
          title: "预警内容",
          dataIndex: "content",
        },
        {
          title: "预警时间",
          width: 150,
          dataIndex: "createTime",
          customRender: function (t, r, index) {
            return moment(t).format("YYYY-MM-DD HH:mm:ss");
          },
        },
      ],
      formRules: {
        timeRange: [{ validator: this.validators.datetimeValidator() }]
      },
      form: {
        timeRange: [],
        deviceType: '',
        meter: '',
      },
      url: {
        list: "/subhealth/pageAlert",
        statistic: "/subhealth/alertStatistic",
      },
      statisticData: [],
      meterList: [],
      meterAllList: [],
      deviceTypeList: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "空调亚健康",
          value: "AIR",
        },
        {
          name: "UPS亚健康",
          value: "UPS",
        },
        {
          name: "数据中心亚健康",
          value: "DATACENTER",
        },
      ],
    };
  },
  mounted() {
    this.loadMeterData();
    this.loadData(true);
  },
  methods: {
    disabledDate(current) {
      // Can not select days before today and today
      return current && current > moment().endOf('day');
    },
    handleSearch() {
      // this.loadStatisticData();
      this.loadData(true);
    },
    loadMeterData() {
      gPostAction("/subhealth/listThresholdMeter", {}).then((res) => {
        if (res.success && res.data) {
          this.meterList = res.data;
          this.meterList.unshift({meter:'',cnName:'全部'})
          this.meterAllList = res.data;
        }
      });
    },
    handleDeviceTypeChange() {
      this.form.meter = "";
      let type = this.form.deviceType;
      if (type) {
        this.meterList = this.meterAllList.filter((item) => item.type === type);
      } else {
        this.meterList = this.meterAllList;
      }
    },
    loadData(isDoSearch) {
      this.$refs.formModel.validate(error => {
        if (!error) { return }
        this.gQueryParam.deviceType = this.form.deviceType;
        this.gQueryParam.meter = this.form.meter;
        let range = this.form.timeRange;
        if (range && range.length) {
          this.gQueryParam.startTime = moment(range[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          if (range.length > 1) {
            this.gQueryParam.endTime = moment(range[1]).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
        } else {
          this.gQueryParam.startTime = '';
          this.gQueryParam.endTime = '';
        }
        if (isDoSearch) {
          this.gQueryParam.pageNo = 1;
          this.gPagination.current = 1;
        }
        gPostAction(this.url.list, this.gQueryParam).then((res) => {
          const data = res.data;
          if (data) {
            this.statisticData = data.alertCounts;
            this.gDataSource = data.pageResult;
            this.gPagination.total = data.totalCount;
          }
        });
      });
    },
    resetSearchForm() {
      this.form.timeRange = []
      this.form.deviceType = ''
      this.form.meter = ''
      this.$refs.formModel.resetFields()
      this.handleDeviceTypeChange();
    },
  },
};
</script>

<style lang="less" scoped>
@import '~@assets/less/search.less';
.search-form {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    .search-box-end {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      .search-item{
        padding-left: 16px ;
        margin: 0 0 16px 0;
      }
    }
  }
  /deep/ .ant-form-inline .ant-form-item {
    margin: 0;
  }
</style>